<template>
	<view>
		<u--form labelPosition="left" :model="basicinfo" ref="uForm" labelWidth="80">
			<u-form-item label="商品名称" prop="name" borderBottom>
				<u-input v-model="basicinfo.name" border="none" placeholder="请输入商品名称" inputAlign="right"></u-input>
			</u-form-item>
			<u-form-item label="商品分类" prop="buyCountText" borderBottom>
				<u-input v-model="basicinfo.buyCountText" border="none" placeholder="请选择商品分类" inputAlign="right" disabled disabled-color="#fff"></u-input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="品牌" prop="brandText" borderBottom>
				<u-input v-model="basicinfo.brandText" border="none" placeholder="请选择品牌" inputAlign="right" disabled disabled-color="#fff"></u-input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="商品编码" prop="bn" borderBottom>
				<view class="pr-20">
					<u-input v-model="basicinfo.bn" border="none" placeholder="自动生成商品编码" inputAlign="right"></u-input>
				</view>
				<u-button slot="right" type="primary" text="生成编码" @click="handleGeneratedCode('BN')"></u-button>
			</u-form-item>
			<u-form-item label="商品简介" prop="brief" borderBottom>
				<u--textarea v-model="basicinfo.brief" border="none" count :disableDefaultPadding="true"></u--textarea>
			</u-form-item>
			<u-form-item label="单位" prop="unit" borderBottom>
				<u-input v-model="basicinfo.unit" border="none" placeholder="请输入" inputAlign="right"></u-input>
			</u-form-item>
			<u-form-item label="商品排序" prop="sort" borderBottom>
				<u-input v-model="basicinfo.sort" border="none" placeholder="请输入商品排序" inputAlign="right" type="number"></u-input>
			</u-form-item>
			<u-form-item label="是否上架" prop="isMarketable" borderBottom>
				<u-switch slot="right" v-model="basicinfo.isMarketable"></u-switch>
			</u-form-item>
			<u-form-item label="虚拟商品" prop="isNomalVirtual" borderBottom>
				<u-switch slot="right" v-model="basicinfo.isNomalVirtual"></u-switch>
			</u-form-item>
			<u-form-item label="是否推荐" prop="isRecommend" borderBottom>
				<u-switch slot="right" v-model="basicinfo.isRecommend"></u-switch>
			</u-form-item>
			<u-form-item label="是否热门" prop="isHot" borderBottom>
				<u-switch slot="right" v-model="basicinfo.isHot"></u-switch>
			</u-form-item>
		</u--form>
	</view>
</template>

<script>
	export default {
		data (){
			return {
				basicinfo:{
					name:'',
					buyCount:'',
					buyCountText:'',
					brandId:'',
					brandText:'',
					bn:'',
					unit:'',
					sort: 1,
					brief:'',
					isMarketable: true,
					isNomalVirtual:false,
					isRecommend:false,
					isHot:false
				}
			}
		},
		watch: {
			basicinfo: {
				deep: true, // 深度监听，包括子对象的变化
				handler(newVal){
					this.$emit('update:basicinfo', newVal)
					console.log('dsd')
				}
			}
		},
		created() {
			this.handleGeneratedCode('BN')
		},
		methods: {
			handleGeneratedCode(str){
				//声明一个随机数变量，默认为1
				let GetRandomn = 1;
				//js生成时间戳
				let timestamp = new Date().getTime();
				//获取随机范围内数值的函数
				//开始调用，获得一个1-100的随机数
				GetRandomn = Math.floor(Math.random() * 30 + timestamp + 1)
				this.basicinfo.bn = str + GetRandomn;
			}
		}
	}
</script>

<style>
</style>